{extend name="public/base" /}

{block name="title"}<title>奖扣任务查看</title>{/block}

{block name="pjax_container"}

<style>
    tr>th,
    td {
        text-align: center;
    }

    .btn-group-xs>.btn,
    .btn-xs {
        padding: 5px;
        margin: 0 5px;
    }
    
.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
    background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 8px 20px;
}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
}
.sreachs{
       background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}

    /* 分割线 */
    .an_tree {
  line-height: 22px;
  margin-top: 10px;
}

.an_tree_set {
  width: 100%;
  position: relative;
}

.an_tree_entry {
  height: 100%;
  width: 100%;
  padding: 3px 0;
  line-height: 24px;
}

.an_tree_main {
  cursor: pointer;
  padding-right: 10px;
  display: flex;
  align-items: center;
}

.an_tree_icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  line-height: 20px;
  color: #c0c4cc;
  text-align: right;
}

.an_tree_icon i {
  padding: 0 5px;
}

.an_tree_txt {
  display: inline-block;
  vertical-align: middle;
  color: #555;
  padding: 0 5px;
}

.an_tree_txt:hover {
  background-color: #e6f7ff;
}

.an_tree_txt:active {
  background-color: #e6f7ff;
}

.tree_txt_active {
  background-color: #e6f7ff;
}

.an_tree_pack {
  display: none;
  padding-left: 20px;
  position: relative;
}

.an_tree_list {
  padding: 0;
}

.an_list_title {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.an_list_item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.an_list_item .item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
}

.an_list_item .item_box i {
  display: none;
  color: #fff;
}

.an_list_item .item_info span {
  margin-right: 5px;
}

.an_list_item:hover {
  background: #f2f8ff;
  color: #1890ff;
}

.list_item_check {
  background: #f2f8ff;
  color: #1890ff;
}

.list_item_check .item_box {
  background-color: #1890ff;
  border-color: #1890ff;
}

.list_item_check .item_box i {
  display: block;
  content: "\f00c";
}

.search_show {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.search_show .an_tree_txt {
  padding: 5px 0;
  cursor: pointer;
}

#myModal_multiple .modal-dialog {
  width: 855px;
}

#myModal_multiple .modal-content {
  width: 855px;
}

#myModal_multiple .multiresult_header {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: flex;
  background: #f5f5f9;
}

#myModal_multiple .multiresult_header .header_clear {
  margin-left: auto;
  cursor: pointer;
  color: #1890ff;
}

#myModal_multiple .an_list_title {
  display: flex;
  align-items: center;
}

#myModal_multiple .an_list_title .all_item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}

#myModal_multiple .an_list_title .all_item_box i {
  display: none;
  color: #fff;
}

#myModal_multiple .an_list_title .all_item_box_check {
  background-color: #1890ff;
  border-color: #1890ff;
}

#myModal_multiple .an_list_title .all_item_box_check i {
  display: block;
  content: "\f00c";
}

#myModal_multiple .multiresult_list .an_list_item .item_box {
  border: none;
}

#myModal_multiple .multiresult_list .an_list_item .item_box i {
  color: #1890ff;
}

#myModal_multiple .multiresult_list .an_list_item:hover .item_box i {
  display: block;
}

#myModal_things .table-left,
#myModal_things_multiple .table-left {
  width: 34%;
}

#myModal_things .table-right,
#myModal_things_multiple .table-right {
  width: 64%;
}

#myModal_things .an_list_item,
#myModal_things_multiple .an_list_item {
  height: 58px;
  padding: 5px 10px;
}

#myModal_things .an_list_item .item_box,
#myModal_things_multiple .an_list_item .item_box {
  margin-left: 0px;
  margin-right: 10px;
}

#myModal_things .an_list_item .item_info .name,
#myModal_things_multiple .an_list_item .item_info .name {
  color: #333;
}

#myModal_things .an_list_item .item_info span,
#myModal_things_multiple .an_list_item .item_info span {
  display: inherit;
  line-height: 24px;
  color: #bbb;
}

#myModal_things .multiresult_header,
#myModal_things_multiple .multiresult_header {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: flex;
  background: #f5f5f9;
}

#myModal_things .multiresult_header .header_clear,
#myModal_things_multiple .multiresult_header .header_clear {
  margin-left: auto;
  cursor: pointer;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item,
#myModal_things_multiple .multiresult_list .an_list_item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

#myModal_things .multiresult_list .an_list_item .item_box,
#myModal_things_multiple .multiresult_list .an_list_item .item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 0px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: none;
}

#myModal_things .multiresult_list .an_list_item .item_box i,
#myModal_things_multiple .multiresult_list .an_list_item .item_box i {
  display: none;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item .item_info,
#myModal_things_multiple .multiresult_list .an_list_item .item_info {
  display: flex;
  align-items: center;
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#myModal_things .multiresult_list .an_list_item .item_info span,
#myModal_things_multiple .multiresult_list .an_list_item .item_info span {
  margin-right: 5px;
  color: #333;
}

#myModal_things .multiresult_list .an_list_item:hover,
#myModal_things_multiple .multiresult_list .an_list_item:hover {
  background: #f2f8ff;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item:hover .name,
#myModal_things_multiple .multiresult_list .an_list_item:hover .name {
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item:hover .item_box i,
#myModal_things_multiple .multiresult_list .an_list_item:hover .item_box i {
  display: block;
}

#myModal_things .multiresult_list .an_list_item:hover .item_info span,
#myModal_things_multiple .multiresult_list .an_list_item:hover .item_info span {
  color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check,
#myModal_things_multiple .multiresult_list .list_item_check {
  background: #f2f8ff;
  color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check .item_box,
#myModal_things_multiple .multiresult_list .list_item_check .item_box {
  background-color: #1890ff;
  border-color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check .item_box i,
#myModal_things_multiple .multiresult_list .list_item_check .item_box i {
  display: block;
}

#myModal_things .list_item_check .item_info .name,
#myModal_things_multiple .list_item_check .item_info .name {
  color: #1890ff;
}

#myModal_things .list_item_check .item_info span,
#myModal_things_multiple .list_item_check .item_info span {
  display: inherit;
  line-height: 24px;
  color: #1890ff;
}

#myModal_things .content_tips,
#myModal_things_multiple .content_tips {
  display: none;
  position: absolute;
  top: 0;
  max-width: 400px;
  line-height: 18px;
  background: #fff;
  padding: 8px;
  border: 1px solid #dadada;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  transform: translate(-50%, 20px);
}

#myModal_things .content_tips span,
#myModal_things_multiple .content_tips span {
  color: #bbb;
}

#myModal_things .content_tips p,
#myModal_things_multiple .content_tips p {
  margin: 0;
}

.organization_index {
  font-size: 20px;
  width: 700px;
}

.organization_index .an_tree_entry {
  line-height: 32px;
}

.organization_index .btn-primary {
  position: absolute;
  right: 70px;
  /* height: 30px; */
}

.organization_index .btn-danger {
  position: absolute;
  right: 0;
}

.myModal_things_type .table-left {
  width: 34%;
}

.myModal_things_type .table-right {
  width: 64%;
}

.myModal_things_type .an_list_item {
  height: 58px;
  padding: 5px 10px;
}

.myModal_things_type .an_list_item .item_box {
  margin-left: 0px;
  margin-right: 10px;
}

.myModal_things_type .an_list_item .item_info .name {
  color: #333;
}

.myModal_things_type .an_list_item .item_info span {
  display: inherit;
  line-height: 24px;
  color: #bbb;
}

.myModal_things_type .list_item_check .item_info .name {
  color: #1890ff;
}

.myModal_things_type .list_item_check .item_info span {
  display: inherit;
  line-height: 24px;
  color: #1890ff;
}

.myModal_things_type .content_tips {
  display: none;
  position: absolute;
  top: 0;
  max-width: 400px;
  line-height: 18px;
  background: #fff;
  padding: 8px;
  border: 1px solid #dadada;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  transform: translate(-50%, 20px);
}

.myModal_things_type .content_tips span {
  color: #bbb;
}

.myModal_things_type .content_tips p {
  margin: 0;
}

/* 分割线 */

/* 弹窗样式，颜学军公共部分 */
.modal-content {
        /* margin-top: 150px; */
        width: 600px;
        height: 690px;

    }

    .modal-body {
        padding: 27px;
        width: 856px;
        height: 570px;
        display: flex;
    }

    .modal-right {
        flex: 1;
        border: 1px solid #eee;
        margin-left: 30px;
    }

    .modal-left {
        height: 100%;
    }

    .modal-right>h4 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .form-control {
        border-radius: 6px;
    }

    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        margin-right: 2%;
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }

    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }
    #clearBtn {
      position: absolute;
      bottom: 0;
      right: 30px;
      margin-bottom: 5px;
    }
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>奖扣任务</li>
        <li class="active">奖扣任务查看</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="" style="top:10px; margin: 10px;">
                    <form action="{:search_url(['name','department_id','task_name','time','department_name'])}" method="GET" pjax-search="" id="export_form">
                        <div class="input-group input-group-sm">
                            <input type="hidden" name="page" value="1" />
                            <div style="float: right;">
                                <label for="" class=" " >部门</label>
                                <input type="text" style="display: inline-block;width: 100px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 28px;border-radius: 3px;" name="department_name" class="department_check_name" value="{:input('get.department_name')}" placeholder="{$placeHolderSearch|default='部门'}" />

                                <!-- 取到对应id部门的值 -->
                                <!-- <input type="hidden" name="department_id" id="departmentId" class="form-control" value="{:input('department_id',0)}"> -->
                                <input type="hidden" id="departmentId" name="department_id" department_id="{:input('get.department_id')}" value="{:input('get.department_id')}">

                                <label for="" class=" " >任务名称</label>
                                <input type="text" style="display: inline-block;width: 100px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 28px;border-radius: 3px;" name="task_name" class="" value="{:input('get.task_name')}" placeholder="{$placeHolderSearch|default='任务名称'}" />
                                <label for="" class=" " >员工姓名</label>
                                <input type="text" style="display: inline-block;width: 100px;margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 28px;border-radius: 3px;" name="name" class="" value="{:input('get.name')}" placeholder="{$placeHolderSearch|default='员工姓名'}" />
                                <label style="margin-bottom:0;" for="">月份</label>
                                <input class="timepicker" name="time" value="{:input('get.time',date('Y-m',time()))}" placeholder="月份"  style="margin: 0px 5px;padding-left: 3px;border: 1px solid #ccc;height: 28px;border-radius: 3px;" AUTOCOMPLETE="off">
                                <div class="input-group-btn" style="display: inline-block;">
                                    <button type="submit" class="btn btn-default sreachs">
                                        <i class="fa fa-search"></i>查询
                                    </button>
                                </div>
                                <div class="box-header with-border" style="margin-left:100px; padding: 0;display: inline-block;height: 22px;">
                                    <div class="pull-right">
                                        <a href="javascript:xls_explode();" class="btn btn-sm btn-primary"><i class="fa fa-cloud-upload"></i> 导出</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-header with-border">
                    <div class="pull-left">
                    </div>
                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th>姓名</th>
                            <th>工号</th>
                            <th>考核月份</th>
                            <th>机构</th>
                            <th>任务名称</th>
                            <th>任务指标(奖分、扣分)/任务人次/比例任务</th>
                            <th>完成得分</th>
                            <th>操作</th>
                        </tr>
                        {volist name="$res" id="v"}
                        <tr>
                            <td>{$v["name"]}</td>
                            <td>{$v["job_number"]}</td>
                            <td>{:date('Ym',$v.time)}</td>
                            <td>{$v["department_name"]}</td>
                            <td>{$v["prize_name"]}</td>
                            <td>
                                奖分:{$v.integral_reward}/{if condition="$v.integral_type eq 0"}周{else:}月{/if}
                                扣分:-{$v.integral_deduct}/{if condition="$v.integral_type eq 0"}周{else:}月{/if}
                                奖扣人次:{$v.man_num}/{if condition="$v.man_type eq 1"}日{elseif condition="$v.man_type eq 2"}周{else:}月{/if}
                                奖扣比例{$v.rate}/月
                            </td>
                            <td>
                                预计扣分：{$v.total_del_integral}
                                实际扣分：{$v.real_del_integral}
                            </td>
                            <td>
                                {:authAction(CONTROLLER_NAME.'/index','show',['uid'=>$v['user_id'],'time'=>date('Y-m',$v.time)])}
                            </td>
                        </tr>
                        {/volist}
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {$list->render()}
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function(){
        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });
    });
    function change_status(id) {
        $.ajax({
            url:"{:url('change_status')}",
            type:'post',
            data:{'id':id},
            success:function (res) {
                $.amaran({'message': res.msg});
                if(res.err == 0){
                    window.location.reload()
                }
            }
        });
    }
    $(function(){
        var now = new Date();
        var currentYear=now.getFullYear();
        var startDate = new Date(currentYear,0,1);
        var endDate = new Date(currentYear+1,0,1);
        $('.timepicker').datetimepicker({
            format: "{$timepickerFormat | default='YYYY-MM'}",   //YYYY-MM-DD HH:mm:ss
            locale: moment.locale('zh-cn'),
            // minDate:startDate,
            maxDate : endDate
        });
    })

    console.log($("input[name='department_id']").val());
    function xls_explode() {
        window.location.href = "{:url('record')}?" + $('#export_form').serialize()+'&export=1';
        return false;
    }
</script>

<!-- 分界线 -->

<!-- Modal 弹出层重写 部门单选  id="myModal_single"-->
<div class="modal fade" id="myModal_department_single" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width:543px;height: 645px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">部门选择</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-left" style="width:485px;">
                        <div class="modal-left-title" style="margin-bottom: 20px;">
                            <div class="input-group">
                                <input name="search_user_name" type="text" class="form-control" placeholder="">
                                <span class="input-group-btn">
                                    <button class="btn btn-info search_btn" type="button"
                                        style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div class="input-group table-body" style="width: 485px">
                            <div class="table-left" style="width: 100%;">
                                <div class="an_tree search_hide">
                                  <!-- 部门插入 -->
                                </div>
                                <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">
                                  <!-- 搜索部门插入 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-default" id="clearBtn">清除部门选择</button>
            </div>
        </div>
    <style>
    .a{
        flex-direction: row;
    }
    </style>
    </div>
    <!-- 部门弹窗操作 部门单选   -->
    <script>
        var now_item_name;
        var now_item_id;
        $(".department_check_name").focus(function () {
            $('#myModal_department_single').modal('show');
            // double_max = $("input[name='double_max']").val();
            now_item_name = $(this);//节点
            now_item_id = $(".department_check_id");//节点
            // first_id = $("input[name='first_check_user_id']").val();//id值
            // user_type = 2;
        });
        $(".department_name_less").focus(function () {
            $('#myModal_department_single').modal('show');
            // double_max = $("input[name='double_max']").val();
            now_item_name = $(this);//节点
            now_item_id = $(".department_id_less");//节点
            // first_id = $("input[name='first_check_user_id']").val();//id值
            // user_type = 2;
        });
    
    </script>
    <!-- 树结构js操作 部门单选  -->
    <script>
        $("#myModal_department_single .an_tree").on("click", ".fa", function () {
            $(this).toggleClass("fa-caret-down");
            $(this).toggleClass("fa-caret-right");
            $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
        });
        // 点击单个部门
        $("#myModal_department_single").on("click", ".an_tree_txt", function () {
            $('#myModal_department_single').modal('hide');
            now_item_name.val($(this).html());
            now_item_id.val($(this).attr("data_id"));

            // 取到对应部门 id
            $('#departmentId').val($(this).attr('data_id'));
            // 部门名
            $('.department_check_name').val($(this).html());
          
        });
        $("#myModal_department_single").on("click", ".search_btn", function () {
            var item = $("#myModal_department_single .an_tree_txt");
            var search_name = $("#myModal_department_single input[name='search_user_name']").val();
            $("#myModal_department_single .search_show").html("");
            if(search_name == ""){
                $("#myModal_department_single .search_hide").show();
                $("#myModal_department_single .search_show").removeClass("an_tree");
            }else{
                $("#myModal_department_single .search_hide").hide();
                $("#myModal_department_single .search_show").show();
                var content = "";
                for (let i = 0; i < item.length; i++) {
                    var name = item.eq(i).html();
                    if (name.indexOf(search_name) != -1) {
                        content += item.eq(i).prop("outerHTML");
                    }
                    // console.log(name);
                }
                $("#myModal_department_single .search_show").append(content)
            }
        });
        // 清除部门选择
        $("#clearBtn").on("click", function() {
          $(".department_check_name").val("");
          $("#departmentId").val("")
          $('#myModal_department_single').modal('hide');  
        })
    </script>
    <!-- 递归填充目录 部门单选  -->
    <script>
        var department = "";
        $.ajax({
            type: 'get',
            url: "{:url('base/base_department_page')}",
            dataType:"json",
            async: false,
            success: function (data) {
                // eventList = JSON.parse(data);
                department = data;
            }
        })
        var an_tree = ergodic(department)
        $("#myModal_department_single .an_tree").append(an_tree);
        function ergodic(data) {
            var content = '';
            $.each(data, function (index, value) {
                if (value.children != "") {
                    var children = ergodic(value.children);
                    content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
                } else {
                    content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
                }
            });
            return content;
        }
    </script>

{/block}
